import React, { useCallback, useEffect, useState, useRef } from 'react'
import * as echarts from 'echarts/core'
import { LineChart, BarChart, MapChart } from 'echarts/charts' // 导入折线图图表，图表后缀根据需要修改
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, GeoComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import css from './runtime.less'
// TODO 地图数据
import mapData from './test.json'

export default function ({ env, data, outputs }) {
  const mapChartRef = useRef(null)
  const chartRef = useRef(null)
  const [mapChart, setMapChart] = useState<any>(null)
  const [chart, setChart] = useState<any>(null)
  const [selected, setSelected] = useState('')

  useEffect(() => {
    // 在这里初始化ECharts实例
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      GeoComponent,
      BarChart, // 确保这里使用了你需要的图表类型
      LineChart, // 确保这里使用了你需要的图表类型
      MapChart, // 确保这里使用了你需要的图表类型
      CanvasRenderer // 使用Canvas渲染器
    ])
    echarts.registerMap('area', mapData)
    // 基于准备好的dom，初始化echarts实例
    const _mapChart = echarts.init(mapChartRef.current)
    setMapChart(_mapChart)
    const option = {
      z: 9,
      series: [
        {
          name: '中国地图',
          type: 'map',
          map: 'area',
          roam: false,
          selectedMode: 'single',
          label: {
            show: true,
            formatter: '{b}',
            color: 'white' // 设置区域名称的颜色为白色
          },
          itemStyle: {
            // 普通状态下的地区颜色
            normal: {
              areaColor: '#193bbb',
              borderColor: '#ffffff'
            },
            // 定义高亮状态下的样式
            emphasis: {
              areaColor: '#fac858',
              label: {
                show: true,
                color: '#FFFFFF' // 高亮状态下的标签颜色
              }
            }
          },
          data: [
            // TODO 默认选中
            {
              name: '扎兰屯市',
              selected: true
            }
          ]
        }
      ]
    }
    // TODO 默认选中
    setSelected('扎兰屯市')
    _mapChart.setOption(option)
    _mapChart.on('click', function (params) {
      setSelected(params.name)
    })

    // 在这里初始化ECharts实例
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      BarChart, // 确保这里使用了你需要的图表类型
      LineChart, // 确保这里使用了你需要的图表类型
      CanvasRenderer // 使用Canvas渲染器
    ])
    // 基于准备好的dom，初始化echarts实例
    const _chart = echarts.init(chartRef.current)
    setChart(_chart)
    // 组件卸载时，清理资源
    return () => {
      _mapChart.dispose()
      _chart.dispose()
    }
  }, [])

  useEffect(() => {
    // console.log('>>>> 加载图表', selected, _chart);
    // TODO 该地区图表的数据
    const series: any[] = [
      // {
      //   name: '本期销量',
      //   type: 'bar',
      //   data: [10, 30, 46, 15, 15, 25]
      // },
      // {
      //   name: '同期销量',
      //   type: 'bar',
      //   data: [5, 20, 36, 10, 10, 20]
      // },
      // {
      //   name: '同比',
      //   type: 'bar',
      //   data: [5, 10, 10, 5, 5, 5]
      // }
    ]
    data.columns.forEach((col: any) => {
      series.push({
        name: col.name,
        type: 'bar',
        data: Array.from({ length: 6 }).map(() => Math.cbrt(Math.random() * 44) + 5)
      })
    })

    // 绘制图表
    chart?.setOption?.({
      title: {
        left: 20,
        text: data.showXAxisName ? data.xAxisName || '' : '',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          color: '#000'
        }
      },
      legend: {
        orient: data.legendOrient || 'vertical',
        right: 20,
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: {
        data: ['202401', '202102', '202403', '202404', '202405', '202406'],
        axisLabel: { color: '#FFFFFF' }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#FFFFFF' }
      },
      series: series
    })
  }, [selected, data.showXAxisName, data.xAxisName, data.legendOrient, data.columns])

  return (
    <div className={css.container} style={data.style}>
      <div ref={mapChartRef} className={css.mapChart}></div>
      <div className={css.chartHeader}>
        <div>{data.largTitle}</div>
        <div>{selected}</div>
      </div>
      <div ref={chartRef} className={css.chart}></div>
    </div>
  )
}
